<!-- reportingResults -->
<template>
    <div>
        <div>语音播报</div>
        <textarea v-model="titleTest" placeholder="输入文本"></textarea>
        <button @click="speak">播报</button>
    </div>
</template>
<script lang="ts" setup name="reportshare">
import { useRouter, useRoute } from "vue-router"
import { Toast } from '/@/utils/Message';
import { onMounted } from "vue"
import { reactive, ref } from 'vue'

const router = useRouter()
const route = useRoute()
const titleTest = ref("邀请客户")
const mediaRecorder = ref<any>("")
const chunks = ref<any>([])
const blobUrl = ref<any>("")
const isRecording = ref<any>(false)
const recordedChunks = ref<any>([])

let data = reactive({
   ...route.query
});
const speak = () => {
    if ('speechSynthesis' in window) {
        const utterance = new SpeechSynthesisUtterance(titleTest.value);
        window.speechSynthesis.speak(utterance);
      } else {
        alert('您的浏览器不支持语音合成');
      }
}

onMounted(async()=>{
    
})
</script>

<!-- less嵌套设置 -->
<style lang="less" scoped>
.t {
    top: 0;
    z-index: 1;
    width: 100%;
    height: 230px;
    position: absolute;
    background: url('../../assets/jst/bj.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.page {
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
    position: relative;
    // background: linear-gradient( 0, rgba(255,255,255,0) 70%, #2792FC 100%, #0280FF 100%);
    background: linear-gradient( 181deg, #BDE1FF 0%, #B7D8FE 10%, #B8DAFC 50%, #BCD8FD 100%);
    .pageHxz {
        z-index: 10;
        width: 97%;
        height: 117px;
        margin-top: 10px;
        margin-left: 1.5%;
        position: relative;
        background: url('../../assets/jst/mk.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    .pageHxzq {
        width: 93%;
        z-index: 10;
        display: flex;
        // height: 300px;
        padding-bottom: 17px;
        margin-top: 10px;
        margin-left: 3.5%;
        position: relative;
        justify-content: center;
        background: url('../../assets/jst/btj.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        .xzqDv {
            width: 93%;
            // height: 230px;
            padding: 10px;
            font-size: 14px;
            margin-top: 47px;
            text-align: left;
            border-radius: 13px;
            box-shadow: 0px 0px 20px 0px rgba(226,226,226,0.2);
            background: linear-gradient( 48deg, #F5FCFF 0%, #FFFFFF 59%, #F5FCFF 100%);
        }
    }
    .pageSec {
        width: 93%;
        z-index: 10;
        min-height: 170px;
        margin-top: 27px;
        margin-left: 3.5%;
        position: relative;
        padding: 10px 13px;
        border-radius: 13px;
        background: linear-gradient( 180deg, #B8DBFF 0%, #DEEDFD 4%, #FFFFFF 10%, #FFFFFF 61%, #F8FBFF 96%, #DEEDFD 100%);
        .pageSecO {
            width: 100%;
            display: flex;
            justify-content: space-between;
            img:nth-child(1){
                width: 207px;
                height: 54px; 
            }
            img:nth-child(2){
                width: 73px;
                height: 70px; 
            }
        }
        .pageSecT {
            width: 100%;
            font-size: 14px;
            margin-top: 10px;
            text-align: left;
            span {
                // color: #FA8A0C;
                color: #000;
                font-size: 17px;
                font-weight: bold;
            }
        }
    }
    .pageButton {
        width: 100%;
        // bottom: 30px;
        margin-top: 45px;
        margin-bottom: 30px;
        display: flex;
        // position: fixed;
        justify-content: center;
        div {
            width: 70%;
            color: #fff;
            padding: 7px 10px;
            border-radius: 17px;
            background: linear-gradient(0 , #44A1FD 0%, #2792FC 48%, #298BF0 100%); 
        }
    }
    .pageHeader {
        z-index: 10;
        width: 97%;
        display: flex;
        font-size: 17px;
        margin-top: 70px;
        color: #FFFFFF;
        padding-left: 10px;
        position: relative;
        justify-content: center;
    }
}
</style>

